<template>
  <div>
    <vxe-modal ref="xModal" v-model="isShowDialog" title="选择产品" width="1000" :zIndex="999" resize destroy-on-close>
      <vxe-grid ref="vGrid"
        resizable
        border
        show-overflow
        highlight-hover-row
        row-id="id"
        column-min-width="10%"
        :loading="loading"
        :form-config="tableForm"
        :toolbar="tableToolbar"
        :columns="tableColumn"
        :pager-config="pagerConfig"
        :sort-config="sortConfig"
        :proxy-config="proxyConfig"
        @toolbar-button-click="buttonClick"
      >
      </vxe-grid>
    </vxe-modal>
  </div>
</template>

<script>
import { productApi } from '@/api/product/product';
export default {
  name: 'ProductListDialog',
  components: {},
  props: {},
  data() {
    return {
      isShowDialog: false,
      loading: false,
      // 按钮权限设置
      buttonsPrivles: {
        
      },
      // pagerConfig
      pagerConfig: {
        pageSize: 10,
        pageSizes: [10, 20, 50, 100]
      },
      // column
      tableColumn: [
        {
          type:'checkbox',
          width: '50'
        },
        {
          type:'seq',
          width: '50'
        },
        {
          title: '产品名称',
          field: 'name'
        },
        {
          title: '规格',
          field: 'specification'
        },
        {
          title: '规格书编号',
          field: 'specNo'
        },
        {
          title: '采购单价',
          field: 'purchasePrice',
          sortable: true,
        }
      ],
      // search form
      tableForm: {
        titleWidth: 100,
        titleAlign: 'right',
        data: {
          searchCount: true,
          name: '',
          shortName: '',
          telephone: '',
          mnemonicCode: ''
        },
        items: [
          { field: 'name', title: '产品名称', span: 6, titlePrefix: { message: '', icon: 'fa fa-exclamation-circle' }, itemRender: { name: '$input', props: { placeholder: '请输入名称' } } },
          { field: 'specification', title: '规格', span: 6, itemRender: { name: '$input', props: { placeholder: '请输入简称' } } },
          { field: 'spcNo', title: '规格书编号', span: 6, itemRender: { name: '$input', props: { placeholder: '请输入座机号' } } },
          { field: 'tags', title: '标签', span: 6, folding: false, titleSuffix: { message: '注意，必填信息！', icon: 'fa fa-info-circle' }, itemRender: { name: '$input', props: { placeholder: '请输入助记码' } } },
          { span: 24, align: 'center', collapseNode: false, itemRender: { name: '$buttons', children: [{ props: { type: 'submit', content: '查询', status: 'primary' } }, { props: { type: 'reset', content: '重置' } }] } }
        ]
      },
      // 按钮
      tableToolbar: {
        id: 'product-list-dialog-button',
        refresh: true,
        custom: true,
        buttons: [
          { code: 'select_code', name: '选择', icon: 'fa fa-plus', visible: true }
        ]
      },
      //sortConfig
      sortConfig: {
        remote: true,
        trigger: 'cell'
      },
      //proxyConfig
      proxyConfig: {
        seq: true,
        // sort: true,
        form: true,
        props: {
          result: 'data.list',
          total: 'data.total'
        },
        ajax: {
          query: this.findList
        }
      }
    };
  },
  computed: {},
  watch: {},
  filters: {},
  created() {},
  methods: {
    // 打开Modal
    showModal() {
      this.isShowDialog = true;
    },
    // 获取数据列表
    findList({ page, sort, form }) {
      // 处理排序条件
      let queryParams = Object.assign({
        pageNum: page.currentPage,
        pageSize: page.pageSize
      }, form);
      if (sort.field !== undefined) {
        queryParams = Object.assign({
          sort: sort.order === 'asc',
          orderByField: sort.field
        }, queryParams);
      }
      return productApi.getList(queryParams);
    },
    buttonClick({code}, event) {
      switch (code) {
        case 'select_code': 
          this.selectProduct();
      }
    },
    selectProduct() {
        let selectRows = this.$refs['vGrid'].getCheckboxRecords();
        if (selectRows.length <= 0) {
            this.$Message.error('请选择产品');
            return false;
        }
        console.log(selectRows);
        this.$emit('selectFinsh', selectRows);
        this.isShowDialog = false;
    }
  }
};
</script>
